<template>
	<view class="container">
		<Navigator2 :title="$t('device.deviceSetting')">
			<template #right>
				<image class="warn-icon" src="/static/setting-warn.png" mode="aspectFit" @tap="naviToDeviceAboutPage"></image>
			</template>
		</Navigator2>
		
		<!-- 设备信息区域 -->
		<view class="device-info">
			<image class="device-image" src="/static/setting-doll.png" mode="aspectFit"></image>
			<view class="device-name">
				<view class="device-title-group">
					<text class="device-title">{{ $t('device.smartDoll') }}</text>
					<view class="device-status">{{ $t('device.pleaseUpgradeFirmware') }}</view>
				</view>
			</view>
		</view>
		
		<!-- 设备配置区域 -->
		<view class="section">
			<view class="section-title">{{ $t('device.deviceConfiguration') }}</view>
			<view class="setting-item">
				<view class="setting-left">
					<view class="setting-info">
						<view class="setting-name">{{ $t('device.smartDollIsInConversation') }}</view>
						<view class="setting-desc">
							<text>{{ $t('device.deviceIsOn') }}</text>
							<image class="battery-icon" src="/static/setting-battery.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="setting-switch">
					<image src="/static/setting-switch.png" mode="aspectFit" @click="showBatteryModal" @tap="showBatteryModal"></image>
				</view>
			</view>
		</view>
		
		<!-- 网络连接区域 -->
		<view class="section">
			<view class="setting-item">
				<view class="setting-left">
					<view class="setting-info">
						<view class="setting-name">{{ $t('device.networkIsConnected') }}</view>
						<view class="setting-desc">{{ $t('device.networkSettings') }}</view>
					</view>
				</view>
				<view class="setting-right">
					<view class="network-icons">
						<template v-if="deviceType == '1'">
							<view class="network-icon" @click="naviToNetworkSetting">
								<image src="/static/setting-wifi.png" mode="aspectFit"></image>
							</view>
						</template>
						<template v-else-if="deviceType == '2'">
							<view class="network-icon" @click="naviToNetworkSetting">
								<image src="/static/setting-4g.png" mode="aspectFit"></image>
							</view>
						</template>
						<template v-else>
							<view class="network-icon" @click="naviToNetworkSetting">
								<image src="/static/setting-wifi.png" mode="aspectFit"></image>
							</view>
							<view class="network-icon" @click="naviToNetworkSetting">
								<image src="/static/setting-4g.png" mode="aspectFit"></image>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 音量控制区域 -->
		<view class="section-volume">
			<view class="volume-header">
				<view class="volume-title">{{ $t('device.volume') }}: {{ $t('device.loud') }}</view>
			</view>
			<view class="volume-control">
				<slider class="volume-slider" :value="volumeValue" @change="onVolumeChange" min="0" max="100" block-size="20" activeColor="#0052D9" />
				<view class="volume-labels">
					<text class="volume-label">{{ $t('device.mute') }}</text>
					<text class="volume-label">{{ $t('device.small') }}</text>
					<text class="volume-label active">{{ $t('device.normal') }}</text>
					<text class="volume-label">{{ $t('device.large') }}</text>
					<text class="volume-label">{{ $t('device.maximum') }}</text>
				</view>
			</view>
		</view>
		
		<!-- 互动设置区域 -->
		<view class="section" style="margin-bottom: 50px;">
			<view class="section-title">{{ $t('device.interactionSettings') }}</view>
			<view class="setting-item" @tap="selectRole">
				<view class="setting-left">
					<text class="setting-name">{{ $t('device.roleSelection') }}</text>
				</view>
				<view class="setting-right">
					<image class="setting-robot" src="/static/setting-robot.png" mode="aspectFit"></image>
					<text class="setting-value">{{ privateBotName ? privateBotName : botName }}</text>
					<image class="setting-icon" src="/static/setting-cursor.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="setting-item" @tap="selectVoice">
				<view class="setting-left">
					<text class="setting-name">{{ $t('device.voiceSelection') }}</text>
				</view>
				<view class="setting-right">
					<text class="setting-value">{{voiceName}}</text>
					<image class="setting-icon" src="/static/setting-cursor.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="setting-item" @tap="selectInteraction">
				<view class="setting-left">
					<text class="setting-name">{{ $t('device.interactionMode') }}</text>
				</view>
				<view class="setting-right">
					<text class="setting-value">{{selectedMode}}</text>
					<image class="setting-icon" src="/static/setting-cursor.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="setting-item" @tap="viewHistory">
				<view class="setting-left">
					<text class="setting-name">{{ $t('device.dialogRecord') }}</text>
				</view>
				<view class="setting-right">
					<image class="setting-icon" src="/static/setting-cursor.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<!-- 保存按钮 -->
		<view class="save-section">
			<button class="save-btn" @tap="saveSettings">{{ $t('device.saveConfiguration') }}</button>
		</view>
		
		<!-- 关机确认模态窗口 -->
		<neil-modal 
			:show="showModal" 
			@close="closeModal" 
			title=""
			:content="$t('device.confirmShutdown')"
			align="center"
			:confirm-text="$t('device.confirm')"
			:cancel-text="$t('device.cancel')"
			@cancel="closeModal" 
			@confirm="confirmShutdown">
		</neil-modal>

		<!-- 温馨提示弹出框 -->
		<neil-modal 
			:show="showModal2" 
			:title="$t('device.prompt')"
			:content="modalContent"
			align="center"
			:confirmText="$t('device.confirm')"
			:showCancel="false"
			@confirm="confirmModal"
			:autoClose="false"
			@close="closeModal2">
		</neil-modal>
		
		<!-- 互动方式选择弹窗 -->
		<view v-if="showInteractionModal" class="modal-overlay" @tap="closeInteractionModal">
			<view class="interaction-modal" @tap.stop="">
				<view class="modal-options">
					<view class="option-item" :class="{'selected': tempSelectedMode === $t('device.buttonMode')}" @tap="selectMode($t('device.buttonMode'))">
						<view class="option-icon">
							<image src="/static/setting-gesture.png" mode="aspectFit"></image>
						</view>
						<view class="option-content">
							<view class="option-title">{{ $t('device.buttonMode') }}</view>
							<view class="option-desc"><text class="desc-label">{{ $t('device.applicable') }}:</text> {{ $t('device.everyone') }}</view>
							<view class="option-desc"><text class="desc-label">{{ $t('device.interactionMode') }}:</text> {{ $t('device.pressAndSpeak') }}</view>
							<view class="option-desc"><text class="desc-label">{{ $t('device.features') }}:</text> {{ $t('device.wakeupFree') }}</view>
						</view>
					</view>
					<view class="option-item" :class="{'selected': tempSelectedMode === $t('device.chatMode')}" @tap="selectMode($t('device.chatMode'))">
						<view class="option-icon">
							<image src="/static/setting-voice.png" mode="aspectFit"></image>
						</view>
						<view class="option-content">
							<view class="option-title">{{ $t('device.chatMode') }}</view>
							<view class="option-desc"><text class="desc-label">{{ $t('device.applicable') }}:</text> {{ $t('device.overSix') }}</view>
							<view class="option-desc"><text class="desc-label">{{ $t('device.interactionMode') }}:</text> {{ $t('device.continuousConversation') }}</view>
							<view class="option-desc"><text class="desc-label">{{ $t('device.features') }}:</text> {{ $t('device.noNeedToPressButton') }}</view>
						</view>
					</view>
				</view>
				<button class="confirm-btn" @tap="confirmModeSelection">{{ $t('device.confirm') }}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../js/api'
	import Navigator2 from '@/components/Navigator2.vue'
	import neilModal from '@/components/neil-modal/neil-modal.vue'
	export default {
		data() {
			return {
				deviceOn: true,
				volumeValue: 60,
				showModal: false,
				showInteractionModal: false,
				selectedMode: this.$t('device.buttonMode'),
				tempSelectedMode: this.$t('device.buttonMode'),
				
				apiHost: getApp().globalData.apiHost,
				id: null,	// 设备主键ID
				deviceId: '',// 设备ID
				name: '',	// 设备名称
				deviceType: '',
				mac: '',
				version: '',
				networkType: '',
				accountId: '',
				botId: 0,
				botName: '',
				botDesc: '',
				botLogo: '',
				privateBotName: '',
				privateBotLogo: '',
				voiceId: 0,
				voiceName: this.$t('device.pleaseSelect'),
				voiceIsClone: false,
				currVoiceIndex: 0,
				voices: [],
				voicesAll: [],
				platform: '1',
				showModal: false,
				showModal2: false,
				modalContent: '',
				networkPriority: true,
				currentWifi: '',
			}
		},
		onLoad(param) {
			if (param.id) {
				this.id = param.id
			}
			if (param.voiceId) {
				this.voiceId = param.voiceId
			}
			if (param.voiceName) {
				this.voiceName = param.voiceName
			}
			if (param.voiceIsClone) {
				this.voiceIsClone = param.voiceIsClone
			}
			if (param.networkPriority) {
				this.networkPriority = param.networkPriority
			}
			if (param.botId) {
				this.botId = param.botId
			}
			if (param.botName) {
				this.botName = param.botName
			}
			if (param.botDesc) {
				this.botDesc = param.botDesc
			}
		},
		mounted() {
			
		},
		onShow() {
			this.getDevice()
		},
		methods: {
			getDevice() {
				api.getDeviceInfo(this.id).then(res => {
					this.deviceId = res.deviceId
					this.name = res.name
					this.deviceType = res.type
					this.networkType = res.networkType
					this.currentWifi = res.wifiName
					this.mac = res.mac
					this.version = res.version
					if (this.voiceId == 0) {
						this.voiceId = res.voiceId
						this.voiceName = res.voiceName
					}
					this.accountId = res.accountId
					this.platform = res.platform
					this.networkPriority = res.wifiPriority
					if (this.botId == 0) {
						this.botId = res.botId
						this.botName = res.botName
						this.botDesc = res.botDesc
						this.botLogo = res.botLogo
						this.privateBotName = res.privateBotName
						this.privateBotLogo = res.privateBotLogo
					}
					
					this.getVoices()
				})
			},
			getVoices() {
				api.getVoices(this.device.platform, this.device.id).then(res => {
					this.voices = res.map(v => v.name)
					this.voicesAll = res
					
					this.$nextTick(() => {
						for (const [index, v] of this.voicesAll.entries()) {
							if (v.id == this.voiceId) {
								this.currVoiceIndex = index
								this.voiceName = v.name
								break
							}
						}
					})
				})
			},
			toggleDevice(e) {
				this.deviceOn = e.detail.value
			},
			onVolumeChange(e) {
				this.volumeValue = e.detail.value

				api.pushMsgToDevice(this.deviceId, JSON.stringify({
					action: 'setVolume',
					data: {
						volume: this.volumeValue
					}
				})).then(res => {
					console.log('pushMsgToDevice', res)
					uni.showToast({
						title: this.$t('device.volumeAdjusted'),
						icon: 'none'
					})
				}).catch(err => {
					console.error('pushMsgToDevice', err)
				})
			},
			selectRole() {
				uni.navigateTo({
					url: `/pages/device/changerole?id=${this.id}&botId=${this.botId}&accountId=${this.accountId}&platform=${this.platform}&voiceId=${this.voiceId}&voiceName=${this.voiceName}&voiceIsClone=${this.voiceIsClone}&networkPriority=${this.networkPriority}`
				})
			},
			selectVoice() {
				uni.navigateTo({
					url: `/pages/device/voicesetting?id=${this.id}&voiceId=${this.voiceId}&platform=${this.platform}&botId=${this.botId}&botName=${this.botName}&botDesc=${this.botDesc}&voiceIsClone=${this.voiceIsClone}&networkPriority=${this.networkPriority}`
				})
			},
			selectInteraction() {
				this.tempSelectedMode = this.selectedMode
				this.showInteractionModal = true
			},
			closeInteractionModal() {
				this.showInteractionModal = false
			},
			selectMode(mode) {
				this.tempSelectedMode = mode
			},
			confirmModeSelection() {
				this.selectedMode = this.tempSelectedMode
				this.showInteractionModal = false
				

				api.pushMsgToDevice(this.deviceId, JSON.stringify({
					action: 'setInteractionMode',
					data: {
						mode: this.selectedMode == this.$t('device.buttonMode') ? 'button' : 'wakeup'
					}
				})).then(res => {
					console.log('pushMsgToDevice', res)
					uni.showToast({
						title: this.$t('device.selected') + this.selectedMode,
						icon: 'none'
					})
				}).catch(err => {
				})
			},
			viewHistory() {
				uni.navigateTo({
					url: `/pages/device/viewdialog?deviceId=${this.deviceId}`
				})
			},
			saveSettings() {
				if (this.voiceName == this.$t('device.pleaseSelect') || this.voiceId == 0) {
					uni.showToast({
						icon: 'none',
						title: this.$t('device.pleaseSelectVoice'),
						duration: 2000
					})
					return
				}
				if (this.botId == 0) {
					uni.showToast({
						icon: 'none',
						title: this.$t('device.pleaseSelectRole'),
						duration: 2000
					})
					return
				}

				const data = {
					deviceId: this.id,
					voiceId: this.voiceId,
					voiceName: this.voiceName,
					isCloneVoice: this.voiceIsClone,
					botId: this.botId,
					botName: this.botName,
					wifiPriority: this.networkPriority
				}
				api.saveDeviceRole(data).then(res => {
					this.modalContent = this.$t('device.pleaseRestartDevice')
					this.showModal2 = true
				})
			},
			showBatteryModal() {
				this.showModal = true
			},
			confirmModal() {
				this.showModal2 = false
				uni.switchTab({
					url:'/pages/tabbar/device'
				})
			},
			closeModal() {
				this.showModal = false
			},
			closeModal2() {
				this.showModal2 = false
			},
			confirmShutdown() {
				this.showModal = false

				api.pushMsgToDevice(this.deviceId, JSON.stringify({
					action: 'shutdown'
				})).then(res => {
					console.log('pushMsgToDevice', res)
					uni.showToast({
						title: this.$t('device.deviceShutdown'),
						icon: 'success'
					})
				}).catch(err => {
					console.error('pushMsgToDevice', err)
				})
			},
			naviToDeviceAboutPage() {
				uni.navigateTo({
					url: `/pages/device/deviceabout?deviceId=${this.deviceId}&ssid=${this.currentWifi}&mac=${this.mac}&version=${this.version}`
				})
			},
			naviToNetworkSetting() {
				uni.navigateTo({
					url: `/pages/device/networksetting?id=${this.id}&deviceId=${this.deviceId}&deviceType=${this.deviceType}&networkType=${this.networkType}&currentWifi=${this.currentWifi}&networkPriority=${this.networkPriority}`
				})
			}
		},
		components: {
			Navigator2,
			neilModal
		}
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #F1F2F5;
	padding-bottom: 120rpx;
	box-sizing: border-box;
}

.device-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0;
	margin: 20rpx 30rpx;
	border-radius: 24rpx;
	
	.device-image {
		width: 104px;
		height: 104px;
		margin-bottom: 20rpx;
	}
	
	.device-name {
		position: relative;
		display: flex;
		justify-content: center;
		width: 100%;
		margin-bottom: 10rpx;
		
		.device-title-group {
			display: flex;
			align-items: center;
			position: relative;
		}
		
		.device-title {
			font-size: 18px;
			color: #000000;
		}
		
		.device-status {
			position: absolute;
			left: 100%;
			margin-left: 16rpx;
			background: #FA721B;
			color: white;
			font-size: 10px;
			line-height: 18px;
			padding: 0px 6px;
			border-radius: 20px;
			white-space: nowrap;
		}
	}
	
	
}

.section {

	.section-title {
		font-size: 18px;
		color: #000000;
		padding: 30rpx 30rpx 0;
	}
}

.setting-item {
	background: white;
	margin: 20rpx 30rpx;
	border-radius: 24rpx;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 10px 20px 20px;
	border-bottom: 1rpx solid #F5F5F5;
	
	&:last-child {
		border-bottom: none;
	}
	
	.setting-left {
		display: flex;
		align-items: center;
		flex: 1;
		
		.setting-info {
			.setting-name {
				font-size: 14px;
				color: #1F2937;
				margin-bottom: 8px;
			}
			
			.setting-desc {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #6B7280;
				line-height: 20px;
				.battery-icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
			}
		}
		
		.setting-name {
			font-size: 30rpx;
			color: #333;
		}
	}

	.setting-right {
		display: flex;
		align-items: center;
		
		.setting-icon {
			width: 16px;
			height: 28px;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
		
		.setting-robot {
			width: 36px;
			height: 36px;
			margin-top: -6px;
			margin-right: 20rpx;
		}

		.setting-value {
			font-size: 14px;
			line-height: 22px;
			color: #6B7280;
		}
		
		.network-icons {
			display: flex;
			margin-right: 20rpx;
			
			.network-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #D7F5DE;
				width: 40px;
				height: 40px;
				border-radius: 50px;
				margin-left: 20rpx;

				image {
					width: 24px;
					height: 24px;
				}
			}
		}
	}

	.setting-switch {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #D7F5DE;
		width: 40px;
		height: 40px;
		border-radius: 50px;
		margin-right: 20rpx;

		image {
			width: 24px;
			height: 24px;
		}
	}
	
}
.section-volume {
	background: white;
	margin: 20rpx 30rpx;
	border-radius: 24rpx;
	overflow: hidden;

	.volume-control {
		
		.volume-header {
			margin-bottom: 20rpx;
			
			.volume-title {
				font-size: 30rpx;
				color: #333;
			}
		}
		
		.volume-labels {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 0 16px;
			
			.volume-label {
				font-size: 12px;
				color: #707A89;
				line-height: 22px;
			}
		}
	}
}


.volume-header {
	padding: 30rpx 30rpx 0;
	
	.volume-title {
		font-size: 30rpx;
		color: #333;
	}
}

.save-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: white;
	
	.save-btn {
		width: 100%;
		height: 88rpx;
		background: #0256FF;
		padding: 8px 16px;
		color: white;
		border-radius: 8px;
		border: none;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&:active {
			background: #007AFF;
		}
	}
}

/* 自定义模态框样式 */
::v-deep .neil-modal__content.neil-modal--padding {
	padding: 60upx 24upx !important;
	min-height: 120upx !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

::v-deep .neil-modal__content .modal-content {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: 600;
	text-align: center;
	line-height: 1.6;
}

/* 确定按钮文字加粗 */
::v-deep .neil-modal__footer-right {
	font-size: 16px !important;
	color: #0256FF !important;
	font-weight: 600 !important;
}

/* 导航栏右侧警告图标样式 */
.warn-icon {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* 互动方式选择弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
}

.interaction-modal {
	background: white;
	border-radius: 8px 8px 0px 0px;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	max-height: 70vh;
	overflow-y: auto;
}

.modal-options {
	margin-bottom: 20px;
}

.option-item {
	display: flex;
	align-items: center;
	padding: 20px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	margin-bottom: 16px;
	cursor: pointer;
	transition: border-color 0.3s;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	&:active {
		border-color: #3B82F6;
		background: linear-gradient(0deg, rgba(2, 86, 255, 0.05), rgba(2, 86, 255, 0.05)), #FFFFFF;
	}
	
	&.selected {
		border-color: #0256FF;
		background: linear-gradient(0deg, rgba(2, 86, 255, 0.05), rgba(2, 86, 255, 0.05)), #FFFFFF;
	}
}

.option-icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	
	image {
		width: 40px;
		height: 40px;
		display: block;
		object-fit: contain;
		object-position: center center;
		flex-shrink: 0;
	}
	
	&:first-child {
		background: #0256FF;
	}
}

.option-item:first-child .option-icon {
	background: #0256FF;
}

.option-item:last-child .option-icon {
	background: #FDAA1D;
}

.option-content {
	flex: 1;
}

.option-title {
	font-size: 16px;
	font-weight: 600;
	color: #000;
	margin-bottom: 8px;
}

.option-item.selected .option-title {
	color: #0256FF;
}

.option-desc {
	font-size: 12px;
	color: #6B7280;
	line-height: 1.5;
	margin-bottom: 4px;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.desc-label {
		font-weight: 600;
	}
}

.confirm-btn {
	width: 100%;
	height: 48px;
	background: #0256FF;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&:active {
		background: #007AFF;
	}
}
</style>